<template>
  <div class="flex-col">
    <div class="list-header flex-row">
      <span>名称</span>
    </div>
    <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick">
      <template #default="scope">
        <div v-if="scope.data.children" class="model-node">
          <!-- <el-icon><Folder /></el-icon> -->
          <!-- scope.node.type == 'database'
                ? 'icon-shujuku'
                : 'icon-wenjianjia', -->
          <i :class="['iconfont', scope.node.type]"></i>
          <span>{{ scope.node.label }}</span>
        </div>
        <div v-else>
          <i class="iconfont icon-biaoge"></i>
          <span>{{ scope.node.label }}</span>
        </div>
      </template>
    </el-tree>
  </div>
</template>

<script setup>
import { ref } from "vue";
// 树级结构数据
const data = ref([
  {
    type: "server-address",
    label: "mysql",
    children: [
      {
        type: "database",
        label: "bigdata-Integration",
        children: [
          {
            type: "datasheet",
            label: "product",
          },
          {
            type: "datasheet",
            label: "client",
          },
          {
            type: "datasheet",
            label: "category",
          },
        ],
      },
      {
        type: "database",
        label: "DaShuJu-YiLiao",
        children: [
          {
            type: "datasheet",
            label: "equipment",
          },
          {
            type: "datasheet",
            label: "materials",
          },
          {
            type: "datasheet",
            label: "quality",
          },
          {
            type: "datasheet",
            label: "product_task",
          },
        ],
      },
    ],
  },
  {
    type: "server-address",
    label: "RapidsDB",
    children: [
      {
        type: "database",
        label: "Ecommerce-bigData-Analysis",
        children: [
          {
            type: "datasheet",
            label: "orders",
          },
          {
            type: "datasheet",
            label: "uesrs",
          },
          {
            type: "datasheet",
            label: "shoppingCart",
          },
        ],
      },
      {
        type: "database",
        label: "testBigScreen",
        children: [
          {
            type: "datasheet",
            label: "department",
          },
          {
            type: "datasheet",
            label: "performance",
          },
        ],
      },
    ],
  },
]);
/** 树节点选中 */
const handleNodeClick = (data) => {
  console.log("handleNodeClick", data);
};

const defaultProps = {
  children: "children",
  label: "label",
};
</script>

<style scoped lang="scss">
.list-header {
  height: 43px;
  border-bottom: 1px solid #e8e8e8;
  padding: 0px 15px 0px 10px;
  font-size: 13px;
  font-weight: 700;
}
:deep(.el-tree-node__content) {
  height: 36px;
}
</style>
